<!--页面逻辑不复杂的主页面视图-->
<template>
  <a-card>
    <a-spin :spinning='confirmLoading'>
      <!--      表单区域-->
      <a-form :form='form' v-if='formDisplay'>
        <a-row :gutter='8'>
          <span v-for='(item,index) in config.list' :key='index'>
          <a-col :xl='item.xl||6' :lg='item.md||7' :md='item.md||24' :sm='item.sm||24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              :label="item.label||''"
              >
<!--              输入框-->
              <span v-if="item.type=='input'">
                  <a-input :type="item.inputType||'text'" :placeholder="item.placeholder||''"
                           v-model='queryParam[item.name]' />
              </span>
              <!--              受页面点击控制 隐藏/展开  的选项-->
            </a-form-item>
          </a-col>
          </span>
          <!--              查询区域，隐藏展示区域-->
          <span style='float: left;overflow: hidden;padding: 4px 0' class='table-page-search-submitButtons'>
              <a-button type='primary' @click='searchQuery' icon='search'>查询</a-button>
              <a-button type='primary' @click='searchReset' icon='reload' style='margin-left: 8px'>重置</a-button>
                            <a @click='handleToggleSearch' style='margin-left: 8px'>
                              {{ toggleSearchStatus ? '收起' : '展开' }}
                              <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
                            </a>

          </span>
        </a-row>
      </a-form>
      <!-- 操作按钮区域 -->
      <div class='table-operator' v-if='formDisplay'>
        <a-button @click="handleAdd('newAdd',null)" type='primary' icon='plus' v-if='btns[0]'>新增</a-button>
        <a-button type='primary' icon='start' @click="startorstop('009')" v-if='btns[1]'>启用</a-button>
        <a-button type='primary' icon='stop' @click="startorstop('003')" v-if='btns[2]'>停用</a-button>
        <a-button type='primary' icon='download' @click="downExportXls('dmsProductPrice_service')" v-if='btns[3]'>导出
        </a-button>
      </div>
      <!-- table区域-begin -->
      <div>
        <div v-if='formDisplay'>
          <a-table
            ref='table'
            size='middle'
            bordered
            :rowKey='rowKey'
            :scroll="{
              x:'max-content'
            }"
            class='Table table-new-css'
            :columns='columns'
            :dataSource='dataSource'
            :pagination='ipagination'
            :loading='loading'
            :rowSelection='{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}'
            @change='handleTableChange'>
            <template :slot='rowKey' slot-scope='text,record'>
              <a @click="tableActions ? handleAdd('detail',record) : ''">{{ text }}</a>
            </template>
            <span v-if='tableActions' slot='action' slot-scope='text, record'>
          <a @click="handleAdd('edit',record)">编辑</a>
          <a-divider type='vertical' />
          <a-dropdown>
            <a class='ant-dropdown-link'>更多 <a-icon type='down' /></a>
            <a-menu slot='overlay'>
              <a-menu-item>
                <a-popconfirm title='确定删除吗?' @confirm='() => handleDelete(record.id)'>
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
          </a-table>
        </div>
      </div>
    </a-spin>
  </a-card>
</template>

<script>
import { getAction, httpAction, postAction } from '@/api/manage'
import { PageListMixin } from '@/mixins/PageListMixin'
import Vue from 'vue'
import { filterObj } from '@/utils/util'

export default {
  name: 'viewModals',
  // mixins: [PageListMixin],
  props: {
    url: {
      type: Object

    },
    rowKey: {
      type: String
    },
    columns: {
      type: Array
    },
    btns: {
      type: Array,
      default: () => {
        return []
      }
    },
    tableActions: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      selectedRowKeys: [],
      loading: false,

      formDisplay: false,
      form: this.$form.createForm(this),
      toggleSearchStatus: true,
      queryParam: {},
      labelCol: {
        xs: { span: 0 },
        sm: { span: 0 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 24 }
      },

      //列设置
      settingColumns: [],
      confirmLoading: false,
      // url: {},
      dataSource: [],
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40', '50'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      }
      // 总配置
    }
  },
  created() {
    console.log(this.url)
  },
  methods: {
    handleAdd(word, data = 0) {
      this.$emit('handleButon', word, data)

    },
    config(data) {
      this.config = data
      // this.url = data.tableData[0].url
      // 处理tableConfig,基础配置
      this.formDisplay = true
      this.$nextTick(() => {
        this.loadData1(1)
      })

    },
    searchQuery() {
      this.loadData1(1)
    },
    searchReset() {
      this.queryParam = {}
      this.selectedRowKeys = []
      this.loadData1(1)
    },
    handleToggleSearch() {
      this.toggleSearchStatus = !this.toggleSearchStatus
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectionRows = selectionRows
    },
    handleTableChange(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      //TODO 筛选
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field
        this.isorter.order = 'ascend' == sorter.order ? 'asc' : 'desc'
      }
      this.ipagination = pagination
      this.loadData1()
    },
    // loadData函数
    loadData1(arg) {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1
      }
      var params = this.getQueryParams()//查询条件
      this.loading = true
      let that = this
      postAction(this.url.list, params).then((res) => {
        if (res.success) {
          let records
          typeof res.result == Array ? records = res.result : records = res.result.records
          that.dataSource = records
          that.ipagination.total = records.length
        }
        if (res.code === 510) {
          that.$message.warning(res.message)
        }
        that.loading = false
      })
    },
    getQueryParams() {
      //获取查询条件
      let sqp = {}
      if (this.superQueryParams) {
        sqp['superQueryParams'] = encodeURI(this.superQueryParams)
        sqp['superQueryMatchType'] = this.superQueryMatchType
      }
      var param = Object.assign(sqp, this.queryParam, this.isorter, this.filters)
      param.field = this.getQueryField()
      param.current = this.ipagination.current
      param.size = this.ipagination.pageSize
      return filterObj(param)
    },
    getQueryField() {
      //TODO 字段权限控制
      var str = 'id,'
      this.columns.forEach(function(value) {
        str += ',' + value.dataIndex
      })
      return str
    }
    /*onClickRow(record) {*/
    /*  return {*/
    /*    on: {*/
    /*      click: () => {*/
    /*        let keys = this.selectedRowKeys*/
    /*        let num = keys.indexOf(record.id)*/
    /*        if (num == -1) {*/
    /*          this.selectedRowKeys.push(record.id)*/
    //           this.selectionRows.push(record)
    //         } else {
    //           this.selectedRowKeys.splice(num, 1)
    //           this.selectionRows.splice(num, 1)
    //         }
    //
    //       }
    //     }
    //   }
    // }
  }
}
</script>

<style scoped>
@import '~@assets/less/common.less';
/*.table-operator .ant-btn {*/
/*  margin: 0 8px 15px 0;*/
/*}*/
/*//表格的新样式*/

</style>